<template>
	<!-- 工资换算系统页面 -->
	<view class="wage-conversion-container">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view class="">
			<!-- 工资换算 -->
			<view class="conversion">
				<view class="conversion-top">
					<!-- 输入工资 -->
					<view class="wage">
						<input type="digit" v-model="inputWage" placeholder="0.00" class="amount" @blur="computeEstimatedAmount"/>
						<view class="description">请输入工资</view>
					</view>
					<!-- 转换图标 -->
					<view class="rate"><image src="../../../static/images/mine/conversion.png" mode="aspectFill"/>
					</view>
					<!-- 预估金额 -->
					<view class="estimated-amount">
						<input  v-model="estimatedCoin" disabled class="amount" />
						<view class="description">预计硬币</view>
					</view>
				</view>
				<!-- 提交申请 -->
				<view class="conversion-bottom">
					<button class="commit-conversion" @click="commintButton">提交申请</button>
					<view class="conversion-message" @click="clickWageConversionMessage">
						<uni-badge :text="messageCount" size="normal" absolute="rightTop">
							<uni-icons type="email-filled" size="40" />
						</uni-badge>
					</view>
				</view>
				
			</view>
			<!-- 换算规则 -->
			<view class="conversion-rules">
				<view class="rules">转换对应表</view>
				<view class="details">敬请期待</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { getDataFromStorage } from "../../../utils/commonUtils";
	import { commintWageConversion, wageConversionMessageCount } from "../../../utils/apiMine.js"
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'返回',
		midst:'工资换算系统'
	});
	
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/mine/mine'
		})
	};
	//------------------------------------工资转换系统--------------------------------------------------
	//输入工资
	const inputWage = ref(null);
	//预计硬币
	const estimatedCoin = ref(null);
	//输入框失去焦点后计算预估硬币
	const computeEstimatedAmount = () => {
		// console.log(inputWage.value)
	  // 检查输入是否为有效数字
	  const wage = parseFloat(inputWage.value);
	  // console.log(wage)
	  if (!isNaN(wage)) {
		estimatedCoin.value = (wage * 0.2).toFixed(2); // 保留两位小数
	  } else {
		estimatedCoin.value = ''; // 输入无效时重置
	  }
	  // console.log(estimatedCoin.value);
	};
	//------------------------------------工资转换系统--------------------------------------------------
	const userId = ref(null);
	getDataFromStorage('userId').then((res) => {
		userId.value = res;
	});
	const commintButton = () => {
		// console.log(inputWage.value);
		if (estimatedCoin.value){
			let wageMessage = {
				'requestUser':userId.value,
				'wage':inputWage.value,
				'coin':estimatedCoin.value
			}
			// console.log(wageMessage);
			commintWageConversion(wageMessage).then(() => {
				inputWage.value = null;
				uni.showToast({
					title:'申请成功',
					icon:'success'
				})
			})
		}
	}
	//跳转到消息列表
	const clickWageConversionMessage = () => {
		uni.redirectTo({
			url:'/pages/mine/wage_coin/wage-conversion-message'
		})
	}
	//------------------------------------onMounted--------------------------------------------------
	const messageCount = ref(0)
	onMounted(() => {
		wageConversionMessageCount().then((res) => {
			messageCount.value = res;
		})
	})
</script>

<style lang="scss" scoped>
	.conversion{
		width: 750rpx;
		height: 210px;
		background: linear-gradient(to right, rgba(250, 250, 240, 1), rgba(211, 211, 211, 1));
		.conversion-top{
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 150px;
			// background-color: aqua;
			.wage, .estimated-amount{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 70px;
				// background-color: aqua;
				.amount{
					font-size: 22px;
					flex: 1; /* 让 input 填满父容器的可用空间 */
					text-align: center; /* 确保文本在 input 中居中 */
					padding: 10px 0;
					border: 5px solid #fff; /* 如果需要，可以移除边框 */
					background: transparent; /* 如果需要，可以设置为透明背景 */
					border-radius: 20px;
					background-color: #B0E0E6;
				}
				.description{
					margin-top: 10px;
					font-size: 16px;
				}
			}
			.rate{
				// background-color: aqua;
				image{
					width: 40px;
					height: 40px;
					
				}
			}
		}
		.conversion-bottom{
			display: flex;
			align-items: center;
			// justify-content: center;
			// background-color: #B0E0E6;s
			.commit-conversion{
				width: 200rpx;
				height: 50px;
				background-color: hsla(300, 100%, 90%, 0.8); /* 粉色，透明度0.8 */
				border-radius: 20px;
				border: none;
			}
			.conversion-message{
				position: absolute;
				right: 50px;
				// background-color: #B0E0E6;
			}
		}
	}
	.conversion-rules{
		.rules{
			padding: 5px;
			border-bottom: 1px solid #ccc; /* 设置底部边框为 1px 的实线，颜色为浅灰色 */
		}
		.details{
			
		}
	}
</style>